<script setup lang="ts">
import { Icon } from "@iconify/vue";
import { useColorMode } from "@vueuse/core";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const mode = useColorMode();
const openGithubPage = () => {
  window.open("https://github.com/super1windcloud", "_blank");
};
</script>

<template>
  <Icon
    icon="mdi:github"
    class="h-[1.2rem] w-[1.2rem] mr-4 cursor-pointer"
    @click.stop="openGithubPage"
    style="
      cursor: pointer;
      position: fixed;
      top: 20px;
      scale: 1.5;
      right: 60px;
      z-index: 1000;
    "
  />
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button
        variant="outline"
        :style="{
          position: 'fixed',
          top:   '10px',
          right: '0',
          zIndex: 1000,
        }"
      >
        <Icon
          icon="radix-icons:moon"
          class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
        />
        <Icon
          icon="radix-icons:sun"
          class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
        />
        <span class="sr-only">Toggle theme</span>
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem @click="mode = 'light'"> Light</DropdownMenuItem>
      <DropdownMenuItem @click="mode = 'dark'"> Dark</DropdownMenuItem>
      <DropdownMenuItem @click="mode = 'auto'"> System</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

<style scoped></style>
